<template>
	<view class="list-container">
		<!-- 搜索栏 -->
		<view class="search-section">
			<view class="search-box">
				<text class="search-icon">🔍</text>
				<input class="search-input" placeholder="搜索内容..." v-model="searchKeyword" 
					@confirm="handleSearch" />
				<text class="clear-icon" v-if="searchKeyword" @click="clearSearch">✕</text>
			</view>
		</view>

		<!-- 筛选栏 -->
		<view class="filter-section">
			<scroll-view class="filter-scroll" scroll-x="true">
				<view class="filter-item" 
					:class="{ active: currentCategory === item.value }"
					v-for="(item, index) in categoryList" 
					:key="index"
					@click="selectCategory(item.value)">
					{{ item.label }}
				</view>
			</scroll-view>
		</view>

		<!-- 列表内容 -->
		<scroll-view class="content-scroll" 
			scroll-y="true" 
			@scrolltolower="loadMore"
			:refresher-enabled="true"
			:refresher-triggered="isRefreshing"
			@refresherrefresh="onRefresh">
			
			<!-- 列表项 -->
			<view class="list-item" 
				v-for="(item, index) in dataList" 
				:key="index"
				@click="goToDetail(item.id)">
				
				<!-- 图片 -->
				<view class="item-image" v-if="item.image">
					<image :src="item.image" mode="aspectFill"></image>
				</view>
				
				<!-- 内容 -->
				<view class="item-content">
					<view class="item-title">{{ item.title }}</view>
					<view class="item-desc" v-if="item.description">{{ item.description }}</view>
					<view class="item-meta">
						<text class="meta-time">{{ item.createTime }}</text>
						<text class="meta-views" v-if="item.viewCount">{{ item.viewCount }}次浏览</text>
					</view>
				</view>
				
				<!-- 操作按钮 -->
				<view class="item-action">
					<text class="action-icon">›</text>
				</view>
			</view>

			<!-- 加载状态 -->
			<view class="load-status" v-if="dataList.length">
				<text v-if="isLoading">加载中...</text>
				<text v-else-if="isFinished">没有更多了</text>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-if="!dataList.length && !isLoading">
				<image src="/static/images/empty.png" mode="aspectFit"></image>
				<text class="empty-text">暂无数据</text>
				<button class="refresh-btn" @click="onRefresh">刷新</button>
			</view>
		</scroll-view>

		<!-- 浮动按钮 -->
		<view class="float-btn" @click="scrollToTop">
			<text class="float-icon">↑</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchKeyword: '',
				currentCategory: 'all',
				categoryList: [
					{ label: '全部', value: 'all' },
					{ label: '推荐', value: 'recommend' },
					{ label: '最新', value: 'latest' },
					{ label: '热门', value: 'hot' }
				],
				dataList: [],
				currentPage: 1,
				pageSize: 10,
				isLoading: false,
				isRefreshing: false,
				isFinished: false
			}
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			// 加载数据
			async loadData(isRefresh = false) {
				if (this.isLoading) return;
				
				this.isLoading = true;
				
				try {
					// 这里应该调用实际的API接口
					// const res = await this.$api.getListData({
					//     page: this.currentPage,
					//     pageSize: this.pageSize,
					//     category: this.currentCategory,
					//     keyword: this.searchKeyword
					// });
					
					// 模拟API延迟
					await new Promise(resolve => setTimeout(resolve, 1000));
					
					// 示例数据
					const mockData = this.generateMockData();
					
					if (isRefresh) {
						this.dataList = mockData;
					} else {
						this.dataList = [...this.dataList, ...mockData];
					}
					
					// 判断是否还有更多数据
					this.isFinished = mockData.length < this.pageSize;
					
				} catch (error) {
					console.error('加载数据失败:', error);
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					});
				} finally {
					this.isLoading = false;
					this.isRefreshing = false;
				}
			},
			
			// 生成模拟数据
			generateMockData() {
				const data = [];
				const startIndex = (this.currentPage - 1) * this.pageSize;
				
				for (let i = 0; i < this.pageSize; i++) {
					const index = startIndex + i + 1;
					data.push({
						id: index,
						title: `示例标题 ${index}`,
						description: `这是第${index}条示例数据的描述信息，用于展示列表项的内容结构。`,
						image: `/static/images/example${(index % 3) + 1}.jpg`,
						createTime: this.formatDate(new Date(Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000)),
						viewCount: Math.floor(Math.random() * 1000)
					});
				}
				
				return data;
			},
			
			// 格式化日期
			formatDate(date) {
				const now = new Date();
				const diff = now - date;
				const days = Math.floor(diff / (24 * 60 * 60 * 1000));
				
				if (days === 0) {
					return '今天';
				} else if (days === 1) {
					return '昨天';
				} else if (days < 7) {
					return `${days}天前`;
				} else {
					return date.toLocaleDateString();
				}
			},
			
			// 搜索
			handleSearch() {
				this.currentPage = 1;
				this.isFinished = false;
				this.loadData(true);
			},
			
			// 清除搜索
			clearSearch() {
				this.searchKeyword = '';
				this.handleSearch();
			},
			
			// 选择分类
			selectCategory(category) {
				if (this.currentCategory === category) return;
				
				this.currentCategory = category;
				this.currentPage = 1;
				this.isFinished = false;
				this.loadData(true);
			},
			
			// 下拉刷新
			onRefresh() {
				this.isRefreshing = true;
				this.currentPage = 1;
				this.isFinished = false;
				this.loadData(true);
			},
			
			// 加载更多
			loadMore() {
				if (this.isLoading || this.isFinished) return;
				
				this.currentPage++;
				this.loadData();
			},
			
			// 跳转详情
			goToDetail(id) {
				uni.navigateTo({
					url: `/subPages/example/detail?id=${id}`
				});
			},
			
			// 回到顶部
			scrollToTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f8f9fa;
	}

	.search-section {
		padding: 20rpx 30rpx;
		background-color: #fff;

		.search-box {
			display: flex;
			align-items: center;
			height: 70rpx;
			background-color: #f5f5f5;
			border-radius: 35rpx;
			padding: 0 30rpx;

			.search-icon {
				font-size: 28rpx;
				color: #999;
				margin-right: 20rpx;
			}

			.search-input {
				flex: 1;
				font-size: 28rpx;
				color: #333;
			}

			.clear-icon {
				font-size: 24rpx;
				color: #999;
				padding: 10rpx;
			}
		}
	}

	.filter-section {
		background-color: #fff;
		border-bottom: 1rpx solid #eee;

		.filter-scroll {
			white-space: nowrap;
			padding: 20rpx 0;

			.filter-item {
				display: inline-block;
				padding: 15rpx 30rpx;
				margin: 0 15rpx;
				font-size: 28rpx;
				color: #666;
				border-radius: 30rpx;
				transition: all 0.3s;

				&.active {
					background-color: #007aff;
					color: #fff;
				}

				&:first-child {
					margin-left: 30rpx;
				}

				&:last-child {
					margin-right: 30rpx;
				}
			}
		}
	}

	.content-scroll {
		flex: 1;
	}

	.list-item {
		display: flex;
		align-items: center;
		padding: 30rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		transition: background-color 0.3s;

		&:active {
			background-color: #f8f9fa;
		}

		.item-image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 12rpx;
			overflow: hidden;
			margin-right: 30rpx;
			flex-shrink: 0;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.item-content {
			flex: 1;
			min-width: 0;

			.item-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
				line-height: 1.4;
				margin-bottom: 15rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.item-desc {
				font-size: 26rpx;
				color: #666;
				line-height: 1.4;
				margin-bottom: 15rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.item-meta {
				display: flex;
				align-items: center;
				gap: 30rpx;

				.meta-time, .meta-views {
					font-size: 24rpx;
					color: #999;
				}
			}
		}

		.item-action {
			margin-left: 20rpx;
			flex-shrink: 0;

			.action-icon {
				font-size: 32rpx;
				color: #ccc;
			}
		}
	}

	.load-status {
		padding: 40rpx;
		text-align: center;
		font-size: 26rpx;
		color: #999;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 30rpx;

		image {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 30rpx;
		}

		.empty-text {
			font-size: 28rpx;
			color: #999;
			margin-bottom: 40rpx;
		}

		.refresh-btn {
			width: 200rpx;
			height: 70rpx;
			background-color: #007aff;
			color: #fff;
			border: none;
			border-radius: 35rpx;
			font-size: 28rpx;
		}
	}

	.float-btn {
		position: fixed;
		right: 30rpx;
		bottom: 150rpx;
		width: 100rpx;
		height: 100rpx;
		background-color: #007aff;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3);

		.float-icon {
			font-size: 32rpx;
			color: #fff;
			font-weight: bold;
		}
	}
</style>
